import React, { Component } from 'react';
export default class List extends Component {
	constructor(props) {
		super(props);
		this.state = {
			listData: [
				{
					uuid: '001',
					text: 'hello',
					time: '2021-12-01',
					author: '令狐冲',
					url: 'http://www.baidu.com'
				},

				{
					uuid: '002',
					text: 'hello',
					time: '2021-12-05',
					author: '张三',
					url: 'http://www.baidu.com'
				},

				{
					uuid: '003',
					text: 'hello',
					time: '2021-12-10',
					author: '欧阳锋',
					url: 'http://www.baidu.com'
				},

				{
					uuid: '004',
					text: 'hello',
					time: '2021-12-30',
					author: '乔峰',
					url: 'http://www.baidu.com'
				}
			]
		};
	}
	componentDidMount = () => {
		console.log('==========>NewsList mounted');
	};
	openUrl = (item, idx) => {
		window.open(item.url);
	};
	render() {
		return (
			<div className="list-container news-list">
				<ul>
					{this.state.listData.map((item, index) => {
						return (
							<li className="news-item" key={index}>
								<div className="field">{item.author}</div>
								<div
									className="field link"
									onClick={() => this.openUrl(item, index)}
								>
									{item.text}
								</div>
								<div className="field">{item.time}</div>
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}
